<template>
  <view class="bg-eee " style="min-height: 100vh;">
    <view class="bg-fff  p-3 mb-1 list-bg">
      <view class="d-flex d-flex-middle ">
        <view class="light-blue-bg blue-text px-1 font24">公共</view>
        <view class="font32  text-clamp ml-2">{{ gameData.escort_type_text }}</view>
      </view>
      <view class="font24 my-1 color999 ch_h">{{ gameData.escort_name }}</view>
      <view class="font38 colorf00 d-flex d-flex-bottom">
        <text class="font22">￥</text>
        <text>{{ gameData.amount }}</text>
      </view>
    </view>

    <view class="bg-fff p-3 mb-1 list-bg">
      <view class="font32 bgEee">代练要求</view>
      <view class="font24 my-1 color999">{{ gameData.escort_introduce }}</view>
    </view>

    <view class="bg-fff p-3 mb-1 list-bg">
      <view class="font32 bgEee">在线时间</view>
      <view class="font24 my-1 color999">{{ gameData.online_time|| '无' }}</view>
    </view>

    <view class="bg-fff p-3 mb-1 list-bg" v-if="gameData.num">
      <view class="font32 bgEee">订单数量</view>
      <view class="font32 my-1 colorf00 ">{{ gameData.num|| '无' }} 单</view>
    </view>

    <view class="bg-fff p-3 mb-1 list-bg" v-if="gameData.escort_type_id==17">
      <view class="font32 bgEee">规格分类</view>
      <view class="font24 my-1 color999">
        <text class="spec-button">{{gameData?.specification.name}}</text>
        <text class="ml-1">单价：{{ gameData?.specification.amount}}</text>
      </view>
    </view>


    <view class="bg-fff p-3 mb-1 list-bg">
      <view class="font32 bgEee">下单备注</view>
      <view class="font24 my-1 color999">{{ gameData.remark || '无' }}</view>
    </view>

    <view class="bg-fff d-flex d-flex-between font24 py-3 px-2  d-flex-middle pb-5 fixedBtn">
      <view class=" d-flex d-flex-middle">
        <text>合计：</text>
        <text class="colorf00 font32">￥{{ gameData.amount }}</text>
      </view>
      <view style="background-color: #2f2f2f;" class=" px-4 py-1 rounded30 colorfff font28"
            @click="goUrl('/pages/order/order?order_type=2&player_order_status=1',gameData.order_no)">
        继续抢单
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  fileApi
} from '@/http/fileApi.js';

export default {
  data() {
    return {
      gameData: {},
    }
  },
  onLoad(data) {
    let option = JSON.parse(decodeURIComponent(data.data))
    console.log(option,'option')
    this.gameData = option
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  methods: {
    goUrl(urlPages, id) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
      } else {
        if (!id) {
          uni.navigateTo({
            url: urlPages
          })
        } else {
          let params = {
            order_no: id
          }
          fileApi.playerTake(params).then((res) => {
            setTimeout(() => {
              uni.navigateTo({
                url: urlPages
              })
            }, 1500)
          }).catch((err) => {
          })
        }
      }
    },
  }
}
</script>

<style scoped>
.bgEee {
  border-bottom: 2rpx solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}


.light-blue-bg {
  background-color: #e6f7ff; /* 淡蓝色背景 */
}

.blue-text {
  color: #1890ff; /* 蓝色字体 */
}

.fixedBtn {
  position: fixed;
  bottom: 0;
  width: calc(100% - 40rpx);
}
.spec-button {
  display: inline-block;
  padding: 8rpx 16rpx;
  border: 2rpx solid #1890ff;
  border-radius: 8rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 24rpx;
  margin-right: 16rpx;
}
</style>
